<template>
    <div class="dialog">
      <el-dialog
        :title="'维修记录'+titleText"
        :visible.sync="showDialog"
        width="55%"
        top="0"
        :close-on-click-modal="false"
        @close="cancel"
      >
        <el-form
          ref="ruleForm"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item label="故障类型选择：" class="w50p" prop="hitchTypeCode">
            <el-select
              v-model="formData.hitchTypeCode"
              clearable
              filterable
              placeholder="故障类型选择"
              :disabled="true"
            >
              <el-option
                v-for="item of hitchTypeArr"
                :key="item.hitchTypeCode"
                :label="item.hitchTypeName"
                :value="item.hitchTypeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择设备：" class="w50p" prop="equipmentCode">
            <el-select
              v-model="formData.equipmentCode"
              clearable
              filterable
              placeholder="选择设备"
              :disabled="true"
            >
              <el-option
                v-for="item in equipmentArr"
                :key="item.equipmentCode"
                :label="item.equipmentName"
                :value="item.equipmentCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择关键字：" class="w50p" prop="hitchDescription">
            <el-select
              v-model="formData.hitchDescription"
              clearable
              filterable
              multiple
              :disabled="true"
              placeholder="选择关键字"
            >
              <el-option
                v-for="item in keysArr"
                :key="item.keywordCode"
                :label="item.hitchKeywordName"
                :value="item.hitchKeywordName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="故障源：" class="w50p" prop="discoverNodes">
            <el-select
              v-model="formData.discoverNodes"
              clearable
              filterable
              placeholder="故障源选择"
              :disabled="true"
            >
              <el-option
                v-for="item of discoverNodesArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="上报人：" class="w50p" prop="proposer">
            <el-select
              v-model="formData.proposer"
              clearable
              filterable
              placeholder="上报人选择"
              :disabled="true"
            >
              <el-option
                v-for="item of userList"
                :key="item.userId"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="申请日期 ：" class="w50p" prop="applyDate">
            <el-date-picker
              v-model="formData.applyDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              clearable
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="维修方式 ：" class="w50p" prop="repairNature">
            <el-select
              v-model="formData.repairNature"
              clearable
              filterable
              placeholder="维修方式选择"
              :disabled="true"
            >
              <el-option
                v-for="item of repairNatureArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备件消耗：" class="w50p">
            <div class="hang-content">
              <div
                v-for="(key,index) in repairConsumeBOList"
                :key="index+'deviceCode'"
                class="hang-content-one"
              >
                <el-select
                  v-model="key.deviceCode"
                  clearable
                  filterable
                  placeholder="备件选择"
                  :disabled="true"
                >
                  <el-option
                    v-for="(item,indexK) of sparePartArr"
                    :key="item.sparePartCode+'spare'+indexK"
                    :label="item.sparePartName"
                    :value="item.sparePartCode"
                  />
                </el-select>
                <el-input
                  v-model="key.num"
                  clearable
                  placeholder="请填写数量"
                  :disabled="true"
                />
                <el-input
                  v-model="key.cost"
                  clearable
                  placeholder="请填写费用"
                  :disabled="true"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="维修日期 ：" class="w50p" prop="repairDate">
            <el-date-picker
              v-model="formData.repairDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              clearable
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="维修人：" class="w50p" prop="handUsername">
            <el-select
              v-model="formData.handUsername"
              clearable
              filterable
              placeholder="维修人选择"
              :disabled="true"
            >
              <el-option
                v-for="item of userList"
                :key="item.userId"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="维修结果：" class="w50p" prop="result">
            <el-input
              v-model="formData.taskStatus"
              clearable
              placeholder="请输入维修结果"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item class="w50p" prop="processMode" label="处理过程：">
            <el-input
              v-model="formData.processMode"
              clearable
              :rows="2"
              type="textarea"
              placeholder="请输入处理过程"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="故障描述：" class="w50p" prop="remark">
            <el-input
              v-model="formData.remark"
              clearable
              :rows="2"
              type="textarea"
              placeholder="请输入故障描述"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>
  import sparePartsInputApi from "@/api/spare-part-manage/spare-parts-input";
  import failureToReportApi from "@/api/equip-repair-manage/failure-to-report";
  import equipTypeApi from "@/api/equip-manage/equip-type/index";
  import equipScrapRecordApi from "@/api/equip-manage/equip-scrap-record";
  import faultKeyManageApi from "@/api/equip-repair-support/fault-key-manage";
  export default {
    name: '',
    components: {},
    props: {
      // 弹框名称
      titleText: {
        type: String,
        default: ""
      },
      nowChanceStau: {
        type: String,
        default: "add"
      },
      show: {
        type: Boolean,
        default: false
      },
      editObject: {
        type: [Object],
        default: () => {
          return {}
        }
      },
      topitemtypeId: {
        type: String,
        default: ""
      },
      hitchTypeArr: {
        type: [Array],
        default: () => {
          return []
        }
      },
      userList: {
        type: [Array],
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        formData: { },
        repairConsumeBOList: [{ num: '', deviceCode: '', cost: '' }],
        rules: {
        },
        // 故障节点
        discoverNodesArr: ['点检发现', '保养发现'],
        showDialog: this.show,
        repairNatureArr: [{ id: "NATURE_IN", name: "委内维修" }, { id: "NATURE_OUT", name: "委外维修" }],
        sparePartArr: [],
        uploadFileList: [],
        equipmentArr: [],
        keysArr: [],
        allkeysArr: [],
        // 设备类型数组
        equipmentTypeList: [],
        defaultProps: {
          children: "childList",
          value: "equipmentTypeCode",
          label: "equipmentTypeName",
          emitPath: false,
          checkStrictly: true
        }
      };
    },

    watch: {
      show(v) {
        this.showDialog = v;
      },
      nowChanceStau(v) {
        this.uploadFileList = [];
        if (v === 'showdetail') {
          this.querydetial()
          this.query(this.editObject.hitchInfoCode)
        }
      }
    },
    created() {
      this.queryPageKeyList()
      this.querySparePart()
      this.queryEquipmentType()
      this.queryAllEnable()
    },
    mounted() {
    },
    methods: {
      changeKey(e) {
        this.$set(this.formData, this.formData.repairWordBOList, e)
        this.formData = { ...this.formData }
      },
      queryPageKeyList() {
        // 获取数据
        let param = {
          page: 1,
          size: 1000
        };
        faultKeyManageApi.queryPageList(param).then(res => {
          if (res.code === 1) {
            let data = res.data || {};
            this.allkeysArr = data.content || []
            this.keysArr = data.content || []
          }
        });
      },
      // 关联设备类型，根据父级查询子级
      queryEquipmentType() {
        // 获取数据
        equipTypeApi.queryTree({}).then(res => {
          if (res.code === 1) {
            let data = res.data || [];
            this.equipmentTypeList = data;
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      changeEquipmentTypeCode() {
        if (this.formData.equipmentTypeCode) {
          if (this.nowChanceStau === 'add') {
            this.queryAllEnable()
          }
          this.queryKey()
          if (this.nowChanceStau === 'edit') {
            this.queryNotDiscardAndDisable()
          }
        } else {
          this.keysArr = this.allkeysArr
        }
      },
      // 查询所有启用的设备
      queryAllEnable() {
        this.equipmentArr = [];
        let params = {
          equipmentTypeCode: this.formData && this.formData.equipmentTypeCode ? this.formData.equipmentTypeCode : ''
        }
        equipScrapRecordApi.queryAllEnable(params).then(res => {
          if (res.code === 1) {
            let data = res.data || []
            this.equipmentArr = data
          }
        })
      },
      // 查询所有不是报废以及禁用的设备
      queryNotDiscardAndDisable() {
        this.equipmentArr = [];
        let params = {
          equipmentTypeCode: this.formData && this.formData.equipmentTypeCode ? this.formData.equipmentTypeCode : void 0,
          equipmentName: void 0
        }
        equipScrapRecordApi.queryNotDiscardAndDisable(params).then(res => {
          if (res.code === 1) {
            let data = res.data || []
            this.equipmentArr = data
          }
        })
      },
      // 条件查询关键字
      queryKey() {
        this.keysArr = [];
        // 获取数据
        faultKeyManageApi.query(this.formData.equipmentTypeCode).then(res => {
          if (res.code === 1) {
            let data = res.data || []
            this.keysArr = data
          }
        })
      },
      querydetial() {
        this.formData = this.editObject
        if (this.formData.repairConsumeVOList) {
          this.repairConsumeBOList = this.formData.repairConsumeVOList
        }
        if (this.editObject.hitchDescription) {
          this.formData.hitchDescription = this.editObject.hitchDescription.split(",")
        } else {
          this.formData.hitchDescription = []
        }
      },
      query(data) {
        // 获取数据
        // var form = new FormData()
        // form.append('hitchInfoCode', data)
        failureToReportApi.queryByHitchInfoId(data).then(res => {
          if (res.code === 1) {
            let data = res.data || [];
            this.uploadFileList = data;
            this.uploadFileList.forEach(a => {
              a.name = a.pictureName
            })
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      // 备件
      querySparePart() {
        // 获取数据
        let param = {
          page: 1,
          size: 1000,
          entity: {
            input: 1 }
        };
        sparePartsInputApi.queryPageList(param).then(res => {
          if (res.code === 1) {
            let data = res.data;
            this.sparePartArr = data.content;
          }
        });
      },
      cancel() {
        this.$emit("cancelDialog");
      }
    }
  };
  </script>

  <style lang="scss" scoped>
  .line-click{
      min-width: 30px;
      height: 30px;
      // background-color: aqua;
      display: flex;
      justify-content: center;
      align-items: center;
      border: snow 1px solid;
      border-radius: 50%;
      margin-bottom: 10px;
      margin-top: 5px;
      margin-left: 5px;
      color:#fff;
      background-color:#003947 ;
      cursor: pointer;
    }
    .hang-content{
      width: 100%;
      .hang-content-one{
          width: 100%;
          display: flex;
      }

    }
    .add-many{
          border: 1px solid #6ecae3;
          width: 40px;
          height: 40px;
          padding: 0;
          background-color: transparent;
          line-height: 40px;
          border-radius: 4px;
          color: rgb(161, 154, 154);
          font-weight: 600;
          i {
              font-size: 40px;
          }
      }
  </style>
